<template>
	<view class="content1">
		<view class="page-head">
			<uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
			<text class="white-font gap-top txt" >个人资料</text>
		</view>
		<view style="margin-top: 40rpx;background-color: rgba(66, 66, 78, 1);">
			<view class="txtbg">
				<text class="ltxt">头像</text>
				<view class="r_avatar" @click="chooseImage">
					<image :src="user.avatar" class="avatar"></image>
					<image class="arrow-right" src="/static/owo/mine-list-go.png"></image>
				</view>
			</view>
			<view class="txtbg">
				<!-- @click="close" -->
				<text class="ltxt">昵称</text>
				<view class="r_avatar" >
					<input  v-model="user.nickname" style="margin-right: 20rpx;text-align: right;"/>
					<!-- <text class="ltxt" style="margin-right: 20rpx;">{{user.nickname}}</text> -->
					<image class="arrow-right" src="/static/owo/mine-list-go.png"></image>
				</view>
			</view>
		</view>
		<view style="text-align: center" class="btn1" @click="addaddress">
			<image @click="take"  src="../../static/owo/save.png" class="save"></image>
		</view>
		<van-popup :show="show" :close-on-click-overlay="true" custom-style="background-color: rgba(0, 0, 0, 0)">
			<view class="digbg">
				<view class="flexbg">
					<text class="nickname">修改昵称</text>
					<view class="inputbg">
						<van-field :value="user.nickname1" placeholder="请输入用户名" :border="false" :clearable="true"
							extra-event-params maxlength="10" @change="onChange" />
					</view>
					<view class="btnok" @click="take">
						确定
					</view>
				</view>
				<image @click="close" src="../../static/pay-close.png" class="close"></image>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		info
	} from '@/api/user'
	export default {
		name: "mall-detail",
		data() {
			return {
				show: false,
				current: 0,
				value: "",
				user: {
					avatar: '/static/icons/mine/avatar.png',
					nickname: '',
					nickname1: '',
					referenceCode: ''
				}
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				const avatar = uni.getStorageSync("avatar")
				const nickname = uni.getStorageSync("nickname")
				const referenceCode = uni.getStorageSync("referenceCode")
				this.user = {
					avatar: avatar,
					nickname: nickname,
					nickname1: nickname,
					referenceCode: referenceCode
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.show = !this.show
			},
			take() {
				uni.showLoading()
				info({
					nickname: this.user.nickname1,
					avatar: this.user.avatar
				}).then(res => {
					if (res.code == 0) {
						this.user.nickname = this.user.nickname1
						uni.setStorageSync("avatar", this.user.avatar)
						uni.setStorageSync("nickname", this.user.nickname)
						this.show = false
					}
					uni.hideLoading()
				})
			},
			chooseImage() {
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: import.meta.env.VITE_BASE_URL + '/v1/fs/native/upload', // 你的上传地址
							filePath: tempFilePaths[0],
							name: 'file', // 这里根据后端需要的字段来定义
							success: uploadFileRes => {
								console.log(JSON.parse(uploadFileRes.data))
								let Res = JSON.parse(uploadFileRes.data)
								if (Res.code == 0) {
									this.user.avatar = Res.data.url
									// this.take()
								} else {
									uni.showToast({
										title: "网络繁忙，稍后再试",
										icon: 'none'
									})
								}
								// 处理上传成功的结果
							},
							fail: uploadFileError => {
								uni.showToast({
									title: "网络繁忙，稍后再试",
									icon: 'none'
								})
								// 处理上传失败的错误
							}
						});
					}
				});
			},
			onChange(e) {
				console.log(e)
				this.user.nickname1 = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	@import 'src/static/scss/common';

	page {
		// background-color: #0A050B;
	}
	.btn1 {
		width: 90%;
		margin-left: 5%;
		z-index: 3;
		margin-top: 50rpx;
	
		.save {
			width: 100%;
			max-height: 84rpx;
		}
	}
	.page-head {
		display: flex;
		gap: 10px;
		width: 100vw;
		line-height: 88px;
		.txt {
			font-weight: bold;
			font-style: oblique;
		}
	}

	.digbg {
		width: 100%;
		background-color: rgba(66, 66, 78, 1);
		border-radius: 20rpx;
		position: relative;
	}

	.close {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.flexbg {
		width: 690rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.van-cell {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.van-field__control {
		color: #ffffff !important;
	}

	.nickname {
		display: inline-block;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.inputbg {
		margin: 20rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
		background-color: #4F4F4F;
		border-radius: 30rpx;
	}

	.btnok {
		border-top: solid 2rpx #363636;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		width: 100%;
		color: #ffffff;
	}

	.padd24 {
		padding: 0 24rpx;
		box-sizing: border-box;
		width: 100%;

	}

	.toptxt {
		font-size: 28rpx;
		color: #9E9E9E;
		line-height: 80rpx;
		height: 80rpx;
	}

	.txtbg {
		border-radius: 30rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffffff;
		margin-bottom: 20rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.ltxt {
		font-size: 28rpx;
	}

	.arrow-right {
		width: 16rpx;
		height: 24rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.r_avatar {
		display: flex;
		align-items: center;
	}
</style>